<template>
	<view class="content">
		<view class="status_bar"><view class="top_view"></view></view>
		<view class="body">
			<image src="../../static/message_center/head_bg.png" class="head_bg"></image>
			<view class="content-choose">
				<view class="content-choose-item" @click="dianji(1)" :class="{ active: show == 1 }" :current="current">留言中心</view>
				<view class="unread_num">2</view>
				<view class="content-choose-item" @click="dianji(2)" :class="{ active: show == 2 }" :current="current">系统通知</view>
			</view>
			<view v-if="current === 1" class="message_list">
				<scroll-view scroll-y="true" class="scroll_list" @scrolltoupper="upper" @scrolltolower="loadMore(current)">
					<view class="message_count">共45条留言</view>
					<view class="message_item">
						<view class="headImg"><image src="../../static/message_center/headImg.png"></image></view>
						<view class="message_info">
							<view class="name">流沙包</view>
							<view class="message_content">快递不是一般的慢，第二天才收到货！真的是服了！</view>
							<view class="time">2019—09—23</view>
						</view>
					</view>
					<view class="message_item">
						<view class="headImg"><image src="../../static/message_center/headImg.png"></image></view>
						<view class="message_info">
							<view class="name">流沙包</view>
							<view class="message_content">快递不是一般的慢，第二天才收到货！真的是服了！</view>
							<view class="time">2019—09—23</view>
						</view>
					</view>
					<view class="message_item">
						<view class="headImg"><image src="../../static/message_center/headImg.png"></image></view>
						<view class="message_info">
							<view class="name">流沙包</view>
							<view class="message_content">
								快递不是一般的慢，第二天才收到货！真的是服了！快递不是一般的慢，第二天才收到货！真的是服了！快递不是一般的慢，第二天才收到货！真的是服了！
							</view>
							<view class="time">2019—09—23</view>
						</view>
					</view>
					<uni-load-more :status="status"></uni-load-more>
				</scroll-view>
				<view class="reply">
					<view class="input_box">
						<view class="reply_input">
							<input
								type="text"
								value=""
								placeholder="请输入您的留言"
								placeholder-style="text-align:center;font-size: 25upx;font-family: 'FZLanTingHeiS-R-GB'; color: rgba(0, 0, 0, 0.302); "
							/>
						</view>
					</view>
					<view class=" send"><image src="../../static/message_center/send.png"></image></view>
				</view>
			</view>
			<scroll-view scroll-y="true" class="notify_list" v-if="current === 2" @scrolltoupper="upper" @scrolltolower="loadMore(current)">
				<view class="search_box"><input type="text" value="" placeholder="搜索" placeholder-style="text-align:center; font-size:25upx" /></view>
				<view class="notify_item">
					<uni-swipe-action :options="options" @click="bindClick">
						<view class="notify_content">
							<view class="notify_head"><image src="../../static/message_center/system_head.png"></image></view>
							<view class="notify_info">
								<view class="info_top">
									<view class="info_title">留言回复</view>
									<view class="info_time">9-20</view>
								</view>
								<view class="info_bot">
									<view class="info_content">对该名患者的处理办法应向上级申请管理协助巴拉啦啦啦阿拉啦啦啦阿拉啦啦啦阿拉啦啦</view>
									<view class="info_tip"></view>
								</view>
							</view>
						</view>
					</uni-swipe-action>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
	components: {
		uniSwipeAction,
		uniLoadMore
	},
	data() {
		return {
			current: 1,
			show: 1,
			options: [
				{
					text: '删除',
					style: {
						backgroundColor: '#dd4444'
					}
				}
			]
		};
	},
	methods: {
		dianji(index) {
			console.log(index);
			if (this.current !== index && this.show !== index) {
				this.current = index;
				this.show = index;
			}
		},
		bindClick(value) {
			uni.showToast({
				title: `点击了${value.text}按钮`,
				icon: 'none'
			});
		}
	}
};
</script>

<style scoped>
@import url('../../css/navigation.css');

.head_bg {
	width: 100%;
	height: 185.41upx;
}

.content {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.content-choose {
	width: 100%;
	display: flex;
	flex-direction: row;
	position: fixed;
	top: calc(var(--status-bar-height) + 64px);
}

.content-choose-item {
	flex: 1;
	height: 55.55upx;
	text-align: center;
	line-height: 55.55upx;
	margin: 0 100upx;
	font-size: 30upx;
	font-family: 'PingFang SC';
	color: #ffffff;
}

.active {
	border-bottom: 3px solid rgb(255, 255, 255);
}

.unread_num {
	background-color: #fa5e09;
	border-radius: 50%;
	height: 50upx;
	width: 50upx;
	text-align: center;
	font-size: 34.02upx;
	font-family: 'FZLTHJW';
	color: rgb(255, 255, 255);
	-moz-transform: matrix(0.73541873187209, 0, 0, 0.73541873187209, 0, 0);
	-webkit-transform: matrix(0.73541873187209, 0, 0, 0.73541873187209, 0, 0);
	-ms-transform: matrix(0.73541873187209, 0, 0, 0.73541873187209, 0, 0);
	position: relative;
	left: -125upx;
	top: -15upx;
}

.message_count {
	background-color: rgba(0, 0, 0, 0.051);
	height: 43.05upx;
	font-size: 25upx;
	font-family: 'FZLanTingHeiS-R-GB';
	color: rgba(0, 0, 0, 0.502);
	display: flex;
	align-items: center;
	padding-left: 20.83upx;
}

.message_item {
	display: flex;
	flex-direction: row;
	padding: 27.77upx 0;
	border-bottom: 0.69upx solid rgba(3, 0, 0, 0.302);
}

.headImg {
	width: 93.75upx;
	display: flex;
	justify-content: center;
}

.headImg image {
	height: 58.33upx;
	width: 58.33upx;
}

.message_info {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.name,
.message_content,
.time {
	flex: 1;
	align-items: center;
	font-size: 25upx;
	font-family: 'FZLanTingHeiS-R-GB';
	padding: 10upx 0;
}

.name {
	color: rgba(0, 0, 0, 0.702);
}

.message_content {
	color: rgb(0, 0, 0);
}

.time {
	color: rgba(0, 0, 0, 0.702);
}

.reply {
	display: flex;
	flex-direction: row;
	width: 100%;
	margin: 20.83upx 0;
	bottom: 0;
}

.input_box {
	display: flex;
	flex: 1;
	justify-content: center;
	align-items: center;
}

.reply_input {
	display: flex;
	justify-content: center;
	width: 634.72upx;
	border-radius: 27.77upx;
	background-color: rgb(222, 222, 222);
}

.reply_input input {
	width: 90%;
	height: 56.94upx;
}

.send {
	width: 93.75upx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.send image {
	width: 41.66upx;
	height: 34.72upx;
}

.message_list {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.scroll_list {
	flex: 1;
}

.search_box {
	background-color: rgba(0, 0, 0, 0.102);
	height: 76.38upx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.search_box input {
	font-size: 25upx;
	font-family: 'FZLanTingHeiS-R-GB';
	color: rgba(0, 0, 0, 0.302);
	border-radius: 6.94upx;
	background-color: rgb(255, 255, 255);
	width: 90%;
	height: 50upx;
}

.notify_list {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.notify_item {
	height: 134.72upx;
	border-bottom: 0.69upx solid rgba(0, 0, 0, 0.302);
}

.notify_content {
	height: 134.72upx;
	display: flex;
	flex-direction: row;
}

.notify_head {
	width: 106.94upx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.notify_head image {
	width: 66.66upx;
	height: 66.66upx;
}

.notify_info {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.info_top {
	font-size: 25upx;
	font-family: 'FZLanTingHeiS-R-GB';
	color: rgb(0, 0, 0);
	display: flex;
	align-items: flex-end;
	flex: 1;
	flex-direction: row;
	padding-bottom: 10upx;
}

.info_title {
	width: 85%;
}

.info_bot {
	flex: 1;
	width: 576.38upx;
	font-size: 18.05upx;
	font-family: 'FZLanTingHeiS-R-GB';
	color: rgba(0, 0, 0, 0.4);
	display: flex;
	flex-direction: row;
}

.info_content {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.info_tip {
	width: 11.8upx;
	height: 11.8upx;
	background-color: #fa5e09;
	border-radius: 50%;
	margin-left: 38.19upx;
}

.info_time {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 18.05upx;
	font-family: 'FZLTHJW';
	color: rgba(0, 0, 0, 0.4);
}
</style>
